import styles from './index.less';
import React, { useState, useEffect } from 'react';
import { Popup, Button } from 'antd-mobile';
import { history } from 'umi';


export default () => {
  const [list, setList] = useState([
    {name:'首页',path:'/home'},
    {name:'解决方案',path:'/solution'},
    {name:'服务与支持',path:'/serviceSupport'},
    {name:'蜂启录',path:'/journal'},
    {name:'成功案例',path:'/successCase'},
    {name:'关于我们',path:'/aboutUs'},
    {name:'加入我们',path:'/joinUs'},
  ])
  const [visible4, setVisible4] = useState(false)
  return (
    <div className={styles.root}>
      <img src={require(`../../assets/logo.png`)} alt='logo' className={styles.logo} />
      <img src={require(`../../assets/menuicon.png`)} alt='menu' className={styles.menuicon} onClick={() => {
        setVisible4(true)
      }} />



      <Popup
        visible={visible4}
        onMaskClick={() => {
          setVisible4(false)
        }}
        position='right'
        bodyStyle={{ minWidth: '100vw' }}
      >
        <div className={styles.root2}>
          <img src={require(`../../assets/logo.png`)} alt='logo' className={styles.logo} />
          <img src={require(`../../assets/cha.png`)} alt='cha' className={styles.cha} onClick={() => {
            setVisible4(false)
          }} />
        </div>
        {list.map((item,index) => {
          return (
            <div key={index} className={styles.list} onClick={()=>{
              // window.location.href=item.path
              window.scrollTo(0,0)
              history.push(item.path);
              setTimeout(()=>{
                setVisible4(false)
              },300)
            }}>{item.name}</div>
          )
        })}
      </Popup>
    </div>
  );
}
